<script>
import { ref, reactive } from "vue";
import { get } from "@/API/axios.js";
import Toast, { toastEffect } from "@/components/Toast";
import ShopItem from "@/components/ShopItem.vue";
import { RouterLink } from "vue-router";

const useDataListEffect = (showToast) => {
  let dataList = ref([]);
  const getDataList = async () => {
    try {
      const res = await get("/api/shop/hot-list");
      if (res?.errno === 0 && res?.data?.length) {
        dataList.value = res.data;
      } else {
        showToast("登录错误", 2000);
      }
    } catch (error) {
      showToast(error, 2000);
    }
  };

  return {
    dataList,
    getDataList,
  };
};

export default {
  name: "list",
  components: { Toast, ShopItem },
  setup() {
    const { toastData, showToast } = toastEffect();
    const { dataList, getDataList } = useDataListEffect(showToast);

    getDataList();
    return { dataList, getDataList, toastData, showToast };
  },
};
</script>

<template>
  <div class="nearby">
    <h3>附近店铺</h3>
    <RouterLink
      v-for="item in dataList"
      :key="item._id"
      :to="`/shop/${item._id}`"
    >
      <ShopItem :item="item" />
    </RouterLink>
  </div>
  <Toast v-if="toastData.isShow" :msg="toastData.msg" />
</template>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/mixin.scss";
.nearby {
  h3 {
    margin-top: 0.16rem;
    margin-bottom: 0.14rem;
    font-size: 0.18rem;
    color: $content-color;
  }
}
</style>
